{% extends "personal_center/profile.html" %}

{% block page_link %}
    <script src="../../static/personal_center/js/mine.js"></script>
    <link rel="stylesheet" href="../../static/technological/css/style.css">
    <link rel="stylesheet" type="text/css" href="../../static/public_file/latest/tui-time-picker.css">
    <link rel="stylesheet" type="text/css" href="../../static/public_file/latest/tui-date-picker.css">
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/tui-calendar.css">
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/default.css">
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/icons.css">

{% endblock %}


{% block style %}
    <style>
        .add_class{
            background: #1E90FF;
        }
        .preserve{
            height: 30px;width: 90%;background: #0070c1;color: #ffffff;border-radius: 3px
        }
        .button-but{
            width: 7%;text-align: center;height: 100%;line-height: 30px;float: left;cursor: pointer;
        }
        .add-style{
            border-bottom: #1E90FF solid 1.5px;
        }
        tr{
            height: 35px;
        }
        th{
            text-align: center;
        }
        table {
            table-layout: fixed;
        }
        td:first-child, th:first-child {
            position:sticky;
            left:0; /* 首行永远固定在左侧 */
            z-index:1;
        }
        thead tr th {
            position:sticky;
            top:0; /* 列首永远固定在头部  */
            background-color: #E8E8E8;
        }
        th:first-child{
            z-index:2;
        }
    </style>
{% endblock %}


{% block right_content %}

    <div class="right-box" style="width: 100%;height: 100%;">
        <div style="height: 99%;width: 100%;">
            <div id="lnb" style="display: none;">
                <div style="display: none;" id="calendarList" class="lnb-calendars-d1"></div>
            </div>


            <div id="right">
                <div id="menu">
                    <span id="select_tag" class="dropdown" style="display: none;float: right;">
                        <button id="dropdownMenu-calendarType" class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="true" style="border: none;">
                            <i id="calendarTypeIcon" class="calendar-icon ic_view_month" style="margin-right: 4px;"></i>
                            <span id="calendarTypeName" style="font-size: 14px;color: #454d55;">Dropdown</span>&nbsp;
{#                            <i class="calendar-icon tui-full-calendar-dropdown-arrow"></i>#}
                        </button>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu-calendarType" style="width: 150px;border-radius: 4px">
                            <li role="presentation" style="font-size: 14px;color: #454d55;">
                                <a class="dropdown-menu-title" role="menuitem" data-action="toggle-daily">
                                    <i class="calendar-icon ic_view_day"></i>天
                                </a>
                            </li>
                            <li role="presentation" style="font-size: 14px;color: #454d55;">
                                <a class="dropdown-menu-title" role="menuitem" data-action="toggle-weekly">
                                    <i class="calendar-icon ic_view_week"></i>周
                                </a>
                            </li>
                            <li role="presentation" style="font-size: 14px;color: #454d55;">
                                <a class="dropdown-menu-title" role="menuitem" data-action="toggle-monthly">
                                    <i class="calendar-icon ic_view_month"></i>月
                                </a>
                            </li>
                            <li role="presentation" class="dropdown-divider"></li>
                            <li role="presentation" style="display: none;">
                                <a role="menuitem" data-action="toggle-workweek">
                                    <input type="checkbox" class="tui-full-calendar-checkbox-square" value="toggle-workweek" checked>
                                    <span class="checkbox-title"></span>Show weekends
                                </a>
                            </li>
                        </ul>
                    </span>
                    <span id="menu-navi" style="float: right;display: none;">
                        <button type="button" class="btn btn-default btn-sm move-day" data-action="move-prev" style="font-size: 24px;color: #00d0ff;width: 60px;height: 30px;line-height: 15px;">
                            <
                        </button>
                        <button type="button" class="btn btn-default btn-sm move-today" data-action="move-today" style="height: 30px;">今天</button>
                        <button type="button" class="btn btn-default btn-sm move-day" data-action="move-next" style="font-size: 24px;color: #00d0ff;width: 60px;height: 30px;line-height: 15px;">
                            >
                        </button>
                    </span>
                    <span id="renderRange" class="render-range" style="float: right;display: none;"></span>


                    <div onclick="chose_category(this.id)" id="my_schedule" class="button-but add-style">
                        我的日程
                    </div>

                    <div onclick="chose_category(this.id)" id="add_schedule" class="button-but">
                        新建日程
                    </div>
                </div>



                <div id="calendar" style="display: none;"></div>


                <div id="schedule-table" style="width: 100%;height: 100%;">
                    <div style="height: 88%;width: 100%;overflow: auto;">
                        <table class="table table-hover table-bordered" style="border-collapse: collapse;width: 100%;">
                            <thead>
                                <tr>
                                    <th scope="col" style="width: 2%;">序号</th>
                                    <th scope="col" style="width: 8%;">行程</th>
                                    <th scope="col" style="width: 5%;">行程地址</th>
                                    <th scope="col" style="width: 5%;">开始时间</th>
                                    <th scope="col" style="width: 5%;">结束时间</th>
                                    <th scope="col" style="width: 5%;">全天</th>
                                    <th scope="col" style="width: 5%;">操作</th>
                                </tr>
                            </thead>
                            <tbody style="overflow: auto;" id="t_table"></tbody>
                        </table>
                        <div id="img-display" style="width: 75%;text-align: center;position: fixed;display: none;">
                            <div style="margin-top: 10%;">
                                <img src="../../static/public_file/images/page-img/11.jpg" alt="">
                                <p style="margin: 0;padding: 0;vertical-align: top;">暂无数据</p>
                            </div>
                        </div>
                    </div>
                    <div style="width: 100%;border: #cfcfcf solid 0.5px;"></div>
                    <div id="pagination" class="pagination" style="margin-left: 20px;margin-top: 1.5%;"></div>
                </div>
            </div>
        </div>
    </div>




    <!--确认删除？-->
    <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm" style="margin-top: 10%;">
            <div class="modal-content" style="height: 150px;border-radius: 7px;width: 300px;background: #F8F8FF;border: #1E90FF solid 1px;">
                <div class="modal-header" style="height: 40px;background: #1E90FF;border-top-left-radius: 7px;border-top-right-radius: 7px;">
                    <h5 class="modal-title" style="line-height: 40px;width: 40%;text-align: center;color: #ffffff;">
                        提示对话框
                    </h5>
                    <button id="close-model2" type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-right: 3%;line-height: 40px;">
                        <span aria-hidden="true" style="font-size: 28px;color: white;">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="height: 50px;line-height: 60px;text-align: center;">
                    <p id="Confirm-content">确认要删除此条行程吗？</p>
                </div>
                <div class="modal-footer" style="height: 40px;">
                    <button id="countersign" type="button" class="btn btn-primary" aria-label="Close"
                            style="margin-left: 2%;margin-right: 2%;background: #1E90FF;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;确&nbsp;认&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </button>
                </div>
            </div>
        </div>
    </div>



    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="../../static/personal_center/js/tui-code-snippet.min.js"></script>
    <script src="../../static/personal_center/js/tui-time-picker.min.js"></script>
    <script src="../../static/personal_center/js/tui-date-picker.min.js"></script>
    <script src="../../static/personal_center/js/moment.min.js"></script>
    <script src="../../static/personal_center/js/chance.min.js"></script>
    <script src="../../static/personal_center/js/tui-calendar.js"></script>
    <script src="../../static/personal_center/js/calendars.js"></script>
    <script src="../../static/personal_center/js/schedules.js"></script>
    <!-- <script src="./js/theme/dooray.js"></script> -->
    <script src="../../static/personal_center/js/app.js"></script>
{% endblock %}
